import React, { Component } from 'react'
// 类组件中的状态(注意: 函数组件无状态)
// 在类组件中定义状态的几种方式:
// 方式1: 在constructor 中定义一个state 变量,用来保存该组件中的响应式数据, 类似于vue 中的data


// 知识点2:
// vue 中可以直接修改数据, 因为vue 使用的响应式原理是循环data 对象中的每一个数据绑定get 和set 方法
// 当修改data 中的数据时, 触发对应的get 和set 实现数据的监听,
// react 中没有使用Object.definePeoprty或者Proxy, 通过this.setState() 来修改数据,
// 并且只能通过该种方式修改响应式数据, 才能被react 监听到, 进而重新渲染dom

// 知识点3:
// 修改state 数据语法:
// 方式一: 对象方式: this.setState({key:value,key:value},回调函数), 回调函数可选
// 参数1: 为对象形式, 修改数据
// 参数2; 为回调函数, 触发时机. 当数据被修改时触发,所以类似于vue中nextTick

// 方式二:函数方式: this.setState(()=>{return {key:value,key:value}},回调函数)


// 问题?
// 请问 setState 是同步方法还是异步方法
// 在react18之后, 变成了只有异步, 在react 18之前有同步有异步
// 在react18之前如果将setState放在定时器中泽为同步,将setState 放在自定义事件中也是同步

export default class Father extends Component {
    // constructor() {
    //     super()
    //     // 方式1: 定义响应式数据
    //     this.state = {
    //         num: 100,
    //     }
    // }
    // 方式2: 定义响应式数据
    state = {
        num: 100,
        username: '王龙'
    }
    render() {

        return (
            <div>
                <p onClick={() => {
                    // this.state.num++
                    this.setState({
                        num: this.state.num + 1
                    }, () => {
                        console.log('num', this.state.num)
                        console.log(document.querySelector('p').innerHTML)
                    })

                    //console.log('num', this.state.num)

                    // setTimeout(() => {
                    //     console.log(document.querySelector('p').innerHTML)
                    // }, 0)
                }}>num:{this.state.num}-方式1-对象修改</p>

                <p onClick={() => {
                    // 参数1: state为要修改的state 数据
                    // 参数2: 父传子接收的属性对象props
                    this.setState((state, props) => ({
                        num: state.num + 1
                    }), () => {
                        console.log('num', this.state.num)
                    })

                }}>num:{this.state.num}-方式2-函数修改</p>

                {/* <p onClick={() => {
                    setTimeout(() => {
                        this.setState({
                            num: this.state.num + 1
                        })
                        console.log(this.state.num)
                    }, 0)
                }}>react18之前同步情况1</p>

                <p id='p3'>自定义原生事件处理函数</p> */}
            </div>
        )
    };
    // componentDidMount() { // 相当于vue 中的mounted
    //     document.querySelector('#p3').addEventListener('click', () => {
    //         this.setState({
    //             num: this.state.num + 1
    //         })
    //         console.log(this.state.num)
    //     })
    // }
}
